<template>

  <view class="container p-bottom bs-order-detail">
    <view v-if="!hasLogin" class="empty need_login">
      <u-empty text="未登录" mode="permission">
        <button size="mini" slot="bottom" class="go-to-login"
                @click="gotoPath('/pages/login/index?from=order_detail&' + serializeParam(options),false)">请先登录
        </button>
      </u-empty>
    </view>

    <scroll-view :scroll-y="true" v-if="order_info">
      <!-- 收货地址 -->
      <view class="b-f" v-if="order_info.address">
        <view class="flow-checkout-header b-f dis-flex">
          <view class="flow-header-left padding-box">
            <view class="flow-checkout-admin f-30 f-30 col-3">
              {{ order_info.address.name }}
              <text class="f-28 col-m">{{ order_info.address.phone }}</text>
            </view>
            <view class="flow-checkout-address f-26">
              {{ order_info.address.province }}/{{ order_info.address.city }}/{{
                order_info.address.area
              }}/{{ order_info.address.detail }}
            </view>
          </view>
        </view>
      </view>

      <!-- 物流信息 -->
      <view class="flow-all-money b-f padding-box m-top20"
            v-if="order_info.order_goods_type===1 && order_info.send_time">
        <view class="dis-flex flow-all-list">
          <text class="flex-five">物流信息</text>
        </view>
        <navigator class="dis-flex" hover-class="none"
                   :url="'/pages/packageA/express/index?order_sn=' + order_info.order_sn">
          <view class="flex-box">
            <view class="dis-flex flow-all-list-cont" v-if="order_info.express && order_info.express.express_name">
              <text class="col-7">物流公司：{{ order_info.express.express_name }}</text>
            </view>
            <view class="dis-flex flow-all-list-cont">
              <text class="col-7" :selectable="true">物流单号：{{ order_info.express.express_no }}</text>
            </view>
          </view>
          <view class="flow-arrow dis-flex">
            <text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
          </view>
        </navigator>
      </view>
      <view class="flow-all-money b-f padding-box m-top20"
            v-if="order_info.order_goods_type===2 && order_info.send_time">
        <view class="dis-flex flow-all-list">
          <text class="flex-five bs-red">虚拟发货内容，请复制</text>
        </view>
        <view class="dis-flex flow-all-list-cont" style="padding: 15rpx 0">
          <text class="col-7">{{ order_info.virtual_info }}</text>
        </view>
        <u-icon
            color="blue"
            class="icon-copy"
            name="/static/images/copy.png"
            @click="copyText(order_info.virtual_info)"
            size="30">
        </u-icon>
      </view>

      <!-- 商品列表 -->
      <view class="order-cont b-f m-top20">
        <view class="padding-box b-f">
          <view class="order-header dis-flex">
            <view class="flex-box dis-flex">
              <text class="title">{{ order_info.order_sn }}</text>
              <u-icon class="icon-copy" name="/static/images/copy.png" @click="copyText(order_info.order_sn)"
                      size="30"></u-icon>
            </view>
            <view class="flex-box flex-x-end dis-flex">
              <text class="col-m">{{ order_info.order_status_desc }}</text>
            </view>
          </view>
        </view>
        <view class="padding-box b-f">
          <view class="order-cont dis-flex">
            <view class="order-num">
              <text :selectable="true">商品信息</text>
            </view>
            <view class="order-time">
              <text>{{ order_info.created_at }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="padding-box b-f">
        <view @tap="goodsDetail" class="dis-flex flow-shopList b-f" :data-id="item.goods_id"
              v-for="(item, index) in order_info.goods" :key="index">
          <view class="flow-list-left">
            <image mode="scaleToFill" :src="item.goods_image"></image>
          </view>

          <view class="flow-list-right">
            <text class="h4 twolist-hidden">{{ item.goods_name }}</text>
            <text class="p f-22 col-7">{{ item.goods_spec }}</text>
            <view class="flow-list-cont">
              <text class="flow-cont">￥{{ item.goods_price }}</text>
              <text class="small">×{{ item.goods_count }}</text>
              <!--              <view class="zhekou" v-if="order.user.level != null && item.goods.vip > 0">会员折扣价{{
                                item.total_price
                              }}
                            </view>-->
            </view>
          </view>
        </view>
      </view>

      <view class="select b-f">
        <view class="flow-num-box b-f">
          <text>共{{ order_info.goods.length }}件商品，合计:￥</text>
          <text class="flow-money">{{ order_info.total_price }}</text>
        </view>
      </view>

      <!-- 买家留言 -->
      <view class="flow-all-money b-f m-top20" v-if="order_info.remark">
        <view class="dis-flex flow-all-list">
          <text class="flex-five">买家留言</text>
        </view>
        <view class="dis-flex flow-all-list-cont" style="padding: 15rpx 0">
          <text class="col-7">{{ order_info.remark || '无' }}</text>
        </view>
      </view>

      <view class="flow-all-money b-f padding-box m-top20" v-if="order_info.amount_list">
        <view class="dis-flex flow-all-list">
          <text class="flex-five">订单金额</text>
          <countdown v-if="order_info.pay_expire_seconds > 0" :expire-time="order_info.pay_expire_seconds"
                     @finished="onCountdownFinished">
            <text class="bs-red" slot-scope="{ time }">支付截止剩余：{{ time }}</text>
          </countdown>
        </view>
        <view class="dis-flex flow-all-list-cont" v-for="(item,index) in order_info.amount_list" :key="index">
          <text class="flex-five col-7">{{ item.name }}</text>
          <text class="flex-five col-m t-r">{{ item.symbol }}{{ item.value }}</text>
        </view>
      </view>
      <!--发票信息,可折叠-->
      <u-collapse>
        <u-collapse-item class="flow-all-money b-f padding-box m-top20" title="发票信息" v-if="order_info.invoice" >
          <view class="flow-all-money b-f padding-box m-top20" >
            <view class="dis-flex flow-all-list-cont" v-for="(item,index) in order_info.invoice" :key="index">
              <text class="flex-five col-7">{{ item.name }}</text>
              <text class="flex-five col-m t-r">{{ item.value }}</text>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>



    </scroll-view>
    <view class="btn-group" v-if="order_info">
      <button size="mini" class="btn" type="default" v-if="order_info.buttons.cancel" @click="cancelOrder">取消订单
      </button>
      <button size="mini" class="btn" type="warn" v-if="order_info.buttons.payment" @click="paymentSelectorOpen">
        支付订单
      </button>
      <button size="mini" class="btn" type="primary" v-if="order_info.buttons.received" @click="confirm">确认收货
      </button>
      <button size="mini" class="btn" type="warn" v-if="order_info.buttons.remind_send" @click="remainCheck('send')">
        催发货
      </button>
      <button size="mini" class="btn" type="warn" v-if="order_info.buttons.remind_check" @click="remainCheck('check')">
        催审核
      </button>
      <button size="mini" class="btn" type="primary" v-if="order_info.buttons.comment" @click="comment">评价</button>
      <button size="mini" class="btn" type="primary" v-if="order_info.buttons.after_sale" @click="after_sale">申请售后
      </button>
      <button size="mini" class="btn" type="warn" v-if="order_info.buttons.delete" @click="deleteOrder">删除</button>
    </view>
    <c_payment from="order" ref="paymentSelector" @payment-selected="onPaymentMethodChange"
               @confirm="confirmPay"></c_payment>
    <fab
        icon_name="/static/images/kefu.png"
        :url="'/pages/packageA/kefu/chat?order_sn='+order_sn"
        :background-color="'#ffffff'"
        :width="60"
        :height="60"
        :initialPosition="{ x: 10, y: -140 }"
    ></fab>
  </view>
</template>

<script>
import order_api from "@/common/order_api";
import c_payment from "@/components/payment/c_payment.vue";
import payment_api from "@/common/payment_api";
import Countdown from "@/pages/packageA/components/Countdown.vue";
import fab from "@/pages/packageA/components/fab/index.vue";

export default {
  components: {
    c_payment, Countdown, fab
  },
  data() {
    return {
      options: {},
      pay_way: '1',
      payment_list: [],
      order_sn: null,
      order_info: null
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad: function (options) {
    this.options = options
    this.order_sn = options.order_sn;
    //this.getOrderDetail(options.order_sn);
  },
  onShow() {
    this.getOrderDetail(this.order_sn);
  },

  methods: {

    onCountdownFinished() {
      console.log('倒计时结束');
      this.getOrderDetail(this.order_sn)
      // 在这里处理倒计时结束后的逻辑
    },

    onPaymentMethodChange(e) {
      console.log(e)
    },
    confirmPay(e) {
      console.log('confirmPay', e)
      this.pay_way = e.value
      if (!e.value) {
        uni.showToast({
          title: '请选择支付方式',
          icon: 'none'
        })
        return;
      }
      uni.showLoading({
        title: '正在处理...',
      })
      let that = this;
      payment_api.pay({
        order_sn: this.order_sn,
        pay_way: this.pay_way
      }).then(res => {
        if (res.code !== 0) {
          that.$u.toast(res.msg);
          return;
        }

        if (this.pay_way == 1) {
          let param = res.data.param;
          // 发起微信支付(小程序)
          uni.requestPayment({
            timeStamp: param.timeStamp,
            nonceStr: param.nonceStr,
            package: 'prepay_id=' + param.prepay_id,
            signType: 'MD5',
            paySign: param.paySign,
            success: function (res) {
              that.getOrderDetail(that.order_sn);
            },
            fail: () => {
              that.show_msg('支付失败')
            }
          });
        } else if (this.pay_way == 2) {
          //支付宝
          //#ifdef H5
          //console.log(res.data.url)
          uni.navigateTo({
            url: '/pages/packageA/h5/web?bsfrom=order-pay&order_sn=' + that.order_sn + '&url=' + res.data.url,
            success: () => {
            },
            fail: (err) => {
              console.log(err)
            }
          })
          return;
          //#endif
          uni.requestPayment({
            provider: 'alipay',
            orderInfo: res.data.params,
            success: function (res) {
              that.getOrderDetail(that.order_sn);
            },
            fail: function (res) {
              that.show_msg('支付失败')
            }
          });
        } else if (this.pay_way == 3) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          that.getOrderDetail(that.order_sn);
        } else if (that.pay_way == 4) {
          that.$u.toast(res.msg)
          if (res.code === 0) {
            setTimeout(function () {
              // 跳转到订单列表
              uni.redirectTo({
                url: '/pages/packageA/order/index'
              });
            }, 1500)
          }
        }

      }).finally(() => {
        uni.hideLoading();
      })
    },


    getOrderDetail: function (order_sn) {
      let that = this;
      uni.showLoading({
        title: '加载中'
      })
      order_api.detail({
        order_sn: order_sn
      }).then(res => {
        if (res.code !== 0) {
          that.$u.toast(res.msg);
          setTimeout(function () {
            uni.navigateBack();
          }, 2000)
          return;
        }
        that.order_sn = res.data.order_info.order_sn
        that.setData(res.data);
      }).finally(() => {
        uni.hideLoading();
      })

    },


    /**
     * 跳转到商品详情
     */
    goodsDetail: function (e) {
      let item_id = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: '/pages/goods/detail?item_id=' + item_id
      });
    },
    comment() {
      let order_sn = this.order_sn;
      uni.navigateTo({
        url: '/pages/packageA/comment/submit/form?order_sn=' + order_sn
      });
    },
    /**
     * 取消订单
     */
    cancelOrder: function (e) {
      let that = this;
      let order_sn = that.order_sn;
      uni.showModal({
        title: '提示',
        content: '确认取消订单？',
        success: function (o) {
          if (o.confirm) {
            order_api.cancel({
              order_sn: order_sn
            }).then(res => {
              that.show_msg(res.msg, 'none', 1500, function () {
                if (res.code === 0) {
                  that.getOrderDetail(that.order_sn)
                }
              })
            }).finally(() => {
            })
          }
        }
      });
    },

    paymentSelectorOpen() {
      this.$refs.paymentSelector.openPopup();
    },

    //催审
    remainCheck(type) {
      let that = this;
      order_api.remain_check({order_sn: this.order_sn, type: type})
          .then(res => {
            this.show_msg(res.msg, 'none', 2000, function () {
              if (res.code === 0) {
                //that.getOrderDetail(that.order_sn);
              }
            })
          })
    },

    deleteOrder() {
      let that = this;
      uni.showModal({
        title: '',
        content: '确定删除订单？',
        success: (res) => {
          if (res.confirm) {
            order_api.remove({order_sn: this.order_sn})
                .then(res => {
                  this.show_msg(res.msg, 'none', 1500, function () {
                    if (res.code === 0) {
                      uni.navigateBack()
                    }
                  })
                })
          }
        }
      })
    },

    after_sale() {
      this.gotoPath('/pages/packageA/order/refund/index?order_sn=' + this.order_sn)
      //this.show_msg('暂未开放...')
    },


    /**
     * 确认收货
     */
    confirm: function (e) {
      let that = this;
      let order_sn = that.order_sn;
      uni.showModal({
        title: '提示',
        content: '确认收到商品？',
        success: function (o) {
          if (o.confirm) {
            order_api.confirm({order_sn: order_sn})
                .then(res => {
                  that.show_msg(res.msg, 'none', 1500, function () {
                    if (res.code === 0) {
                      that.getOrderDetail(that.order_sn)
                    }
                  })
                })
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import 'detail.scss';
</style>
